import React from "react";

// 数组中每一项是个 React 元素
const list = [<button>1</button>, <button>2</button>, <button>3</button>];

class App extends React.Component {
  state = {
    list: [
      {
        id: 1,
        imgSrc:
          "https://tse1-mm.cn.bing.net/th/id/R-C.fc48d5b3c65b7b79980ab09dfc2890d8?rik=jy07dRFBQAwjzw&riu=http%3a%2f%2f5b0988e595225.cdn.sohucs.com%2fimages%2f20190322%2fe2edee9d2ee847f0b564fcbadf356a46.jpeg&ehk=cKT9XpGfozyLcO5sia93t8gLeJurN9RM%2boqkkCk6a7Q%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1",
        productName: "坤坤的背带裤",
        price: 9.9,
        count: 1,
      },
      {
        id: 2,
        imgSrc:
          "https://tse3-mm.cn.bing.net/th/id/OIP-C.U2zPWJK7Gus24zXyQWwi0AHaEG?pid=ImgDet&rs=1",
        productName: "品如的衣服",
        price: 19.9,
        count: 1,
      },
      {
        id: 3,
        imgSrc:
          "https://static1.paizi.com/uploadfile/2018/0710/20180710095354871.jpg",
        productName: "秀儿的秋裤",
        price: -9.9,
        count: 1,
      },
    ],
  };

  render() {
    return (
      <div>
        <h1>购物车案例</h1>

        {/* {this.state.list.map((item) => (
          <button>{item.id}</button>
        ))} */}

        <table className="tb">
          <thead>
            <tr>
              <th>
                <input type="checkbox" name="" id="" />
              </th>
              <th>产品图片</th>
              <th>编号</th>
              <th>品牌名称</th>
              <th>价格</th>
              <th>数量</th>
              <th>操作</th>
            </tr>
          </thead>

          <tbody>
            {this.state.list.map((item, index) => {
              return (
                <tr key={item.id}>
                  <td>
                    <input type="checkbox" name="" id="" />
                  </td>
                  <td>
                    <img src={item.imgSrc} alt="" />
                  </td>
                  <td>{item.id}</td>
                  <td>{item.productName}</td>
                  <td>{item.price}</td>
                  <td>
                    <button
                      onClick={() => {
                        if (item.count === 1) {
                          // 不允许-1
                          return;
                        }
                        // (推荐)使用 map
                        this.setState({
                          list: this.state.list.map((aaa) => {
                            // 判断 要修改的数据
                            if (aaa.id === item.id) {
                              return {
                                ...aaa,
                                count: aaa.count - 1,
                              };
                            } else {
                              return aaa;
                            }
                          }),
                        });
                      }}
                    >
                      -
                    </button>
                    {item.count}
                    <button
                      onClick={() => {
                        // +
                        // const newList = JSON.parse(
                        //   JSON.stringify(this.state.list)
                        // );
                        // newList[index].count++;
                        // console.log("this.state.list", this.state.list);
                        // this.setState({
                        //   list: newList,
                        // });

                        // (推荐)使用 map
                        this.setState({
                          list: this.state.list.map((aaa) => {
                            // 判断 要修改的数据
                            if (aaa.id === item.id) {
                              return {
                                ...aaa,
                                count: aaa.count + 1,
                              };
                            } else {
                              return aaa;
                            }
                          }),
                        });
                      }}
                    >
                      +
                    </button>
                  </td>
                  <td>
                    <button
                      onClick={() => {
                        // 删除
                        // (错误)1. 直接修改，是不行的
                        // this.state.list.splice(index, 1);
                        // (推荐)2. 使用 setState + filter 的操作，是OK的。
                        // this.setState({
                        //   list: this.state.list.filter(
                        //     (aaa) => aaa.id !== item.id
                        //   ),
                        // });
                        // 3. 拷贝一份现有数据，然后修改它，再setState, 是OK的
                        const newList = [...this.state.list];
                        newList.splice(index, 1);
                        this.setState({
                          list: newList,
                        });
                      }}
                    >
                      删除
                    </button>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    );
  }
}

export default App;
